<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam.param"
              @on-search="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <add
      v-if="state.visibleSave"
      :title="state.title"
      :itemId="state.itemId || ''"
      :visiable="state.visibleSave"
      @close="handleClose"
    ></add>
  </page-layout>
</template>

<script>
import { message, modal } from "ant-design-vue";

import { page, remove } from "@/api/module/student/information-tracking";
import { filterEmptyByObject } from "@/tools/common";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { reactive, createVNode, ref, onActivated } from "vue";
import { useI18n } from "vue-i18n";
import add from "./modal/add.vue";

const removeKey = "remove";

export default {
  name: "sending-transcripts",
  components: {
    add,
  },
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

    const columns = [
      {
        title: t('sendingTranscripts.label.semester'),
        dataIndex: "semester",
        key: "semester",
        width: 130,
      },
      {
        title: t('sendingTranscripts.label.student'),
        dataIndex: "recName",
        key: "recName",
        width: 130,
      },
      {
        title: t('sendingTranscripts.label.includeCourses'),
        dataIndex: "curDetail",
        key: "curDetail",
        width: 130,
      },
      {
        title: t('sendingTranscripts.label.sendingCity'),
        dataIndex: "city",
        key: "city",
        width: 130,
      },
      {
        title: t('sendingTranscripts.label.mailingAddress'),
        dataIndex: "addDetail",
        key: "addDetail",
        width: 130,
        ellipsis: true,
      },
      {
        title: t('sendingTranscripts.label.sendExpress'),
        dataIndex: "trackName",
        key: "trackName",
        width: 130,
      },
      {
        title: t('sendingTranscripts.label.deliveryCourierNo'),
        dataIndex: "trackNum",
        key: "trackNum",
        width: 130,
      },
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      param.tranType = 3;
      let response = await page(param);
      return {
        data: response.data.record,
        total: response.data.total,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: "您是否确定要删除此数据?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          message.loading({ content: "提交中...", key: removeKey });
          remove({ id: record.id }).then((response) => {
            if (response.success) {
              message
                .success({ content: "删除成功", key: removeKey, duration: 1 })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: "删除失败",
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      itemId: "",
      title: t('sendingTranscripts.label.newGradeSheet'),
    });
    const toolbar = [
      {
        code: 'sending-transcripts:add',
        label: t('button.newly'),
        type: "primary",
        event: function () {
          (state.visibleSave = true),
            (state.itemId = ""),
            (state.title = t('sendingTranscripts.label.newGradeSheet'));
        },
      },
    ];
    /// 行操作
    const operate = [
      {
        label: t("button.detail"),
        event: function (row) {
          state.itemId = row.id;
          state.title = t('sendingTranscripts.label.detail');
          state.visibleSave = true;
        },
      },
      {
        code: 'sending-transcripts:remove',
        label: t("button.delete"),
        event: function (record) {
          removeMethod(record);
        },
      },
    ];
    const handleClose = (value) => {
      state[value] = false;
      tableRef.value.reload();
    };
    const searchParam = reactive({
      param: [
        {
          key: "recName",
          type: "input",
          label: t('sendingTranscripts.label.student'),
          placeholder: t('placeholder.pleaseEnter'),
        },
      ],
    });

    const search = function (value) {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
      };
    };
    const onReset = function () {
      state.param = {};
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    onActivated(() => {
      tableRef.value.reload();
    });
    return {
      t,
      state,
      fetch,
      toolbar,
      search,
      onReset,
      columns,
      pagination,
      searchParam,
      onSelectChange,
      tableRef,
      handleClose,
      operate,
    };
  },
};
</script>
